<template>
<div>
  <el-card class="box-card" shadow="hover">
    <div slot="header" class="clearfix">
      <span>宿舍管理</span>
    </div>
  <el-row :gutter="10">
   <el-col :span="6">
     <el-input placeholder="请输入宿舍名称" v-model="dromname"></el-input>
   </el-col>
    <el-button type="primary" size="small" class="check" @click="doSearch">点击查询</el-button>
  </el-row>
  </el-card>

    <el-row :gutter="10" type="flex" class="tab">
     <el-col :span="18">
       <el-card class="box-card1">
         <div slot="header" class="clearfix">
           <span>宿舍列表</span>
         </div>
         <el-table
             :data="dromList"
             border
             style="width:100%">

           <el-table-column
               prop="name"
               label="宿舍名称"
               width="120">
           </el-table-column>
           <el-table-column
               prop="position"
               label="宿舍位置"
               width="120">
           </el-table-column>
           <el-table-column

               label="宿舍类型"
               width="120">
             <template slot-scope="scope">
               <span>{{ scope.row.type | dromtype}}</span>
             </template>
           </el-table-column>
           <el-table-column
               prop="bak"
               label="宿舍描述"
               width="120">
           </el-table-column>
           <el-table-column
               fixed="right"
               label="操作"
               width="100">
             <template slot-scope="scope">
               <el-button @click="handleClick(scope.row)" type="text" size="small">删除</el-button>
               <el-button type="text" size="small" @click="doEdit(scope.row)">编辑</el-button>
             </template>
           </el-table-column>
         </el-table>
       </el-card>
     </el-col>
      <el-col :span="6" class="btns">
        <el-button type="primary" size="medium"  class="add" @click="addDrom">点击新增</el-button>
      </el-col>
    </el-row>

    <drom-log ref="logs" @refresh="Dromlistt"></drom-log>

</div>
</template>

<script>
import drom from '@/api/xy/drom'
import DromLog from '@/views/xy/drom/DromLog'
export default {
    name:"Xydrom",
  components:{
    DromLog
  },
  filters: {
    dromtype:function(val){
      if (val){
        switch (val){
          case 0:
            return '男生宿舍';
            break;
          case 1:
            return '女生宿舍';
            break;
          case 2:
            return '未定义';
            break;
          default:
            return

        }
      }else {
        return '未填写'
      }
    }
  },
data(){
return{
  dromList:[],
  dromname:""




}

},
methods:{
  handleClick(row) {
    //删除文件
    this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
      center: true
    }).then(() => {
      drom.dromDel({
        id:row.id
      })
          .then(res=>{
            if (res.code == true){
              this.$message('删除成功!!!')
              this.Dromlistt();
            }else {
              this.$message('删除失败!!!')
            }
          })
    }).catch(() => {
      this.$message({
        type: 'info',
        message: '已取消删除'
      });
    });




  },
  //点击编辑按钮打开弹窗
  doEdit(val){
    this.$refs.logs.showlog(val.id)
  },

  addDrom(){
   this.$refs.logs.showlog()

  },
  Dromlistt(){
    drom.dromList({
      start:1,
      limit:20,
      name:this.dromname
    })
        .then(res=>{
          console.log(res)

          this.dromList = res.data.list;
        })
  },
  //查询功能
  doSearch(){
    this.Dromlistt()
  }

},
  created(){
     this.Dromlistt()
  },


}

</script>
<style lang='scss' scoped>
.box-card{
  width: 90%;
  margin: 0 auto;
  margin-top: 20px;
  .check{
    margin-top: 3px;
  }
}
.box-card1{
  width: 75%;
  margin: 0 auto;
  margin-top: 30px;
  margin-left: 5%;
}
.tab{
  display: flex;
  justify-content: space-between;
  .btns{



      .add{
   margin-top: 100px;

    }
  }

}
.dromlist{
  text-align: center;
  line-height: 40px;
  font-size: 20px;
}

</style>
